<template>
	<el-container>
		<el-aside :class="collapse?'coll':''" width="201px">
			<el-menu default-active="/Index" class="el-menu-vertical-demo" :collapse="collapse"
				background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened router
				:default-active="routeIf">
				<el-menu-item index="/Index/main" @click.native="ClearHomePage">
					<i class="el-icon-menu"></i>
					<span slot="title">首页</span>
				</el-menu-item>
				<el-submenu :index="item.path" v-for="(item,index) in list" v-if="item.children.length !== 0">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>{{item.meta.title}}</span>
					</template>
					<el-menu-item-group>
						<el-menu-item v-for="(ite,inx) in item.children" :index="ite.path">{{ite.meta.title}}
						</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>
		</el-aside>
		<el-container>
			<el-header style="padding: 0px 0px;z-index: 999;background-color: #FFF;margin-bottom: 10px;">
				<div class="indexTop">
					<div class="svg">
						<svg data-v-4e6f274c="" t="1492500959545" viewBox="0 0 1024 1024" version="1.1" @click="svg"
							:class="rotateBox?'rollback':'forward'" xmlns="http://www.w3.org/2000/svg" p-id="1691"
							xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" class="hamburger">
							<path data-v-4e6f274c=""
								d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
								p-id="1692"></path>
							<path data-v-4e6f274c=""
								d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
								p-id="1693"></path>
							<path data-v-4e6f274c=""
								d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
								p-id="1694"></path>
						</svg>
						<div style="margin-left: 10px;">
							<el-breadcrumb separator="/">
								<el-breadcrumb-item :to="{ path: '/Index/main' }" @click.native="ClearHomePage">首页
								</el-breadcrumb-item>
								<el-breadcrumb-item v-for="(item,index) in obtain">
									{{item.meta.title}}
								</el-breadcrumb-item>
							</el-breadcrumb>
						</div>
					</div>
					<div class="el-icon">
						<el-tooltip class="item" effect="dark" content="全屏" placement="bottom-start">
							<el-button>
								<div><i class="el-icon-full-screen"></i></div>
							</el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="中/英文切换" placement="bottom-start">
							<el-button>
								<div><i class="el-icon-rank"></i></div>
							</el-button>
						</el-tooltip>

						<el-tooltip class="item" effect="dark" content="消息提示" placement="bottom-start">
							<el-button>
								<div><i class="el-icon-bell"></i></div>
							</el-button>
						</el-tooltip>
						<div><img src="../assets/1.gif"
								style="width: 50px; height: 48px; border-radius: 10px;vertical-align: bottom;">
						</div>
						<el-dropdown>
							<span class="el-dropdown-link">
								<i class="el-icon-arrow-down el-icon--right el-icon-caret-bottom"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>首页</el-dropdown-item>
								<el-dropdown-item>密码修改</el-dropdown-item>
								<el-dropdown-item @click.native="signOut()">退出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
				<div class="app">
					<div :class="routeIf=='/Index/main'?'linkage':''" @click="Three()" class="linkagee">
						<span>首页</span>
					</div>

					<div v-for="(item,index) in preservation" @contextmenu="showMenu(index,item)"
						:class="routeIf==item.path?'linkage':''" @click="ThreeLevelRouting(item)" class="linkagee">
						<span>{{item.title}}</span>
						<span class="el-icon-close" @click.stop="deleteCurrent(index,item)"></span>

						<!-- //右键菜单 -->
						<vue-context-menu :contextMenuData="contextMenuData" style="width: 100px;height: 50px;"
							@refresh="refresh" @close="close(index,item)" @closeOther="closeOther" @closeAll="closeAll">
						</vue-context-menu>
					</div>
				</div>
			</el-header>
			<el-main style="margin-top: 20px;">
				<router-view />
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import {
		logout
	} from '../utils/axios.js'
	export default {
		data() {
			return {
				// 菜单数据
				item: '',
				contextMenuData: {
					subscript: '',
					menuName: 'demo',
					//菜单显示的位置
					axis: {
						x: null,
						y: null
					},
					//菜单选项
					menulists: [{
							fnHandler: 'refresh', //绑定事件
							btnName: '刷新' //菜单名称
						},
						{
							fnHandler: 'close', //绑定事件
							btnName: '关闭' //菜单名称
						},
						{
							fnHandler: 'closeOther', //绑定事件
							btnName: '关闭其他' //菜单名称
						},
						{
							fnHandler: 'closeAll', //绑定事件
							btnName: '关闭所有' //菜单名称
						}
					]
				},
				// isRouterAlive: true,
				routeIf: '',
				HideShow: false,
				collapse: false,
				rotateBox: false,
				preservation: [], //保存{path:"/Index/main"}{title:"首页"}
				obtain: [], //获取 
			}
		},
		created() {

			//默认选中
			this.routeIf = this.$route.path
			// console.log(this)
			if (this.routeIf === "/Index/main") {} else {
				// console.log(this.$route.matched[1].meta.title)
				this.preservation.push({
					title: this.$route.matched[1].meta.title,
					path: this.$route.path
				})
			}

		},
		watch: {

			//末尾添加
			$route(to, from) {
				this.obtain = to.matched
				this.routeIf = to.path
				// console.log(to, 9999999);
				// console.log(to.matched[1].meta.title);
				// console.log(to.matched[1].path);
				// console.log(to)
				if (to.matched[1].meta.title !== "首页") {
					this.preservation.push({
						title: to.matched[1].meta.title,
						path: to.matched[1].path
					})
				}
				//去重
				let obj = {}
				this.preservation = this.preservation.reduce((cur, next) => {
					obj[next.title] ? '' : obj[next.title] = true && cur.push(next)
					return cur
				}, [])
				// console.log(to.matched[1].meta.title)
				// let node = this.preservation.filter(item => {
				// 	// return item.title == to.matched[1].meta.title
				// 	console.log(item.title)
				// })
				// console.log(node.length)
				// if(node.length == 1){

				// }
				// console.log(node,111111)
			}
		},
		methods: {
			//关闭
			close() {
				// console.log(this.subscript,9999)
				// console.log(this.item,9998)
				if (this.item.path != this.$route.fullPath) {
					this.preservation.splice(this.subscript, 1)
				} else {
					this.preservation.splice(this.subscript, 1)
					this.$router.push(this.preservation[this.subscript - 1].path)
				}
			},

			//关闭其他
			closeOther() {
				console.log("关闭其他")
			},

			//关闭所有
			closeAll() {
				console.log("关闭所有")
				this.preservation = []
				this.$router.push("/Index/main")
			},


			//刷新
			refresh() {
				this.$router.push({
					path: '/SkipBlank',
					query: {
						path: this.$route.path
					}
				})
			},


			//右键触发
			showMenu(index, item) {
				this.subscript = index
				this.item = item
				// console.log(this.subscript,987987)
				event.preventDefault()
				var x = event.clientX
				var y = event.clientY
				this.contextMenuData.axis = {
					x,
					y
				}
			},

			//点击切换路由
			ThreeLevelRouting(item) {
				console.log(item, 987987987)
				this.$router.push({
					path: item.path
				})
			},

			Three() {
				this.$router.push({
					path: '/Index/main'
				})
			},

			//菜单缩放和图片动画
			svg() {
				if (this.collapse == true) {
					this.collapse = false
				} else {
					this.collapse = true
				}
				this.rotateBox = !this.rotateBox
			},

			//数组清空
			ClearHomePage() {
				// console.log(132)
				this.obtain = []
			},

			//点击跳到登录页面
			signOut() {
				logout().then((res) => {
					console.log(res)
					if (res.data.errno == 0 || res.data.errno == 501) {
						window.sessionStorage.clear() //删除所有缓存数据
						window.localStorage.clear()
						window.location.href = window.location.origin + window.location.pathname
						this.$router.push("/login")
					} else {
						console.log(111111)
					}
					// if (res.data.errno != 200) {
					// 	window.sessionStorage.clear() //删除所有缓存数据
					// 	window.localStorage.clear()
					// 	window.location.href = window.location.origin + window.location.pathname
					// 	console.log(666)
					// 	this.$router.push("/login")
					// }
				})
			},

			//点击X关闭当前
			deleteCurrent(index, item) {
				console.log(index)
				console.log(this)
				console.log(this.preservation[0].path)
				console.log(this.$route.fullPath)
				// this.preservation.splice(index, 1)
				if (item.path != this.$route.fullPath) {
					this.preservation.splice(index, 1)
				} else {
					this.preservation.splice(index, 1)
					this.$router.push(this.preservation[index - 1].path)
				}
			}
		},
		mounted() {
			// console.log(list,999999999999)
			this.meuns = this.routes
			// console.log(this.list)
		},
		computed: {
			list() {
				return global.antRouter
			}
		}
	}
</script>



<style lang="less">
	.el-container {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	.el-menu-vertical-demo {
		height: 100% !important;
		background-color: #304156;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
	}


	.el-aside {
		transition: all 0.5s;
	}

	.coll {
		width: 64px !important;
	}

	.svg {
		height: 20px;
		display: flex;
		align-items: center;

		.hamburger {
			width: 20px;
			height: 20px;
		}
	}

	.rollback {
		transform: rotate(-90deg);
	}

	.rollback {
		transform: rotate(90deg);
	}


	.indexTop {
		height: 50px;
		display: flex;
		align-items: center;
		display: flex !important;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;

		.el-icon {
			display: flex;
			align-items: center;

			.item {
				margin: 4px;
				margin-right: 15px;
				font-size: 20px;

				.el-button {
					width: 40px;
					height: 40px;
				}
			}

		}

	}

	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;

		.el-icon-arrow-down {
			font-size: 20px;
		}
	}

	.app {
		height: 35px;
		display: flex;
		width: 100%;
		border-bottom: 3px solid #e1e1e1;

		.linkage {
			background-color: #FFD04B;
		}

		.linkagee {
			border: 1px solid #f3f3f3;
			height: 30px;
			line-height: 30px;
			margin-left: 10px;
			padding: 0px 10px;

			.el-icon-close {
				font-size: 12px;
				margin-left: 5px;
			}
		}
	}

	.vue-contextmenu-listWrapper[data-v-1931f86e] {
		padding: 0px !important;
		height: 108px !important;
		color: #818181 !important;

		div {
			padding: 2px 0px !important;
		}
	}
</style>
